<template>
    <Page>
        <div class="search">
            <el-form :inline="true" :model="params" class="demo-form-inline">
                <el-form-item label="日期">
                    <el-date-picker
                        v-model="dateTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="small"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        @change="changeDate"
                        :picker-options="dateOption"
                        style="width:250px;"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="经销商">
                    <el-autocomplete
                        class="inline-input"
                        v-model="params.searchKey"
                        label="请输入经销商"
                        value-key="mchName"
                        :fetch-suggestions="queryMerchant"
                        placeholder="请输入经销商"
                        @select="selectComplate"
                        size="small"
                    ></el-autocomplete>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="searchData">查询</el-button>
                    <el-button type="primary" size="small" @click="resetSearch" plain>重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="datalist">
            <div class="table-header"></div>
            <div class="table-charts">
                <div class="ticker_charts" id="ticker_charts" :style="{width:'100%',height:'430px'}"></div>
            </div>
            <div class="table-list">
                <el-table
                    :data="listData.list"
                    stripe
                    style="width:100%"
                    width="100%"
                    :highlight-current-row="false"
                    size="small"
                    :header-cell-style="{background:'#FAFAFA',color:'#666', fontSize:'13px'}"
                >
                    <el-table-column prop="monthday" label="日期" align="center"></el-table-column>
                    <el-table-column prop="dayCount" label="电票派发数量/金额" align="center"></el-table-column>
                    <el-table-column prop="getCount" label="领取电票数量/领金额" align="center"></el-table-column>
                </el-table>
                <div class="list-paginate">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="params.currPage"
                        :page-size="params.pageSize"
                        :total="listData.totalCount"
                        @current-change="changePage"
                    ></el-pagination>
                </div>
            </div>
        </div>
    </Page>
</template>
<script>
import Page from "@/components/page/Page";
export default {
    data(){
        return {
            params:{
                searchKey:null,
                dateBegin:null,
                dateEnd:null,
                currPage:1,
                pageSize:15,
            },
            listData:{
                currPage: 0,
                list: [],
                pageSize: 0,
                totalCount: 0,
                totalPage: 0,
            },
            dateTime:[],
            merchantList:[],
            dateOption:{
                shortcuts: [{
                    text: '昨天',
                    onClick(picker){
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        console.log(picker);
                        picker.$emit('pick', [date, date]);
                    },
                }, {
                    text: '近七天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '近30天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '近90天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            chartData:{
                titles:[],
                values:{
                    getNum:[],
                    dayNum:[],
                    dayAmount:[],
                    getAmount:[],
                },
            },
            ticketOption:{      // 图表
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    show:true,
                    type:'plain',
                    align:'right',
                    right:'auto',
                    data: ['电票派发数量', '电票领取数量', '电票派发金额', '电票领取金额']
                },
                grid: {
                    top:'10%',
                    left: '3%',
                    right: '4%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [10,20,30,40,50,60],
                    axisLabel: {
                        textStyle: {
                            color: "#7C8DA3",
                            margin: 15
                        },
                    },
                    axisTick: {
                        show: true,
                    },
                    axisLine: {//y轴线的颜色以及宽度
                        show: true,
                        lineStyle: {
                            color: "#7C8DA3",
                            width: 1,
                            type: "solid"
                        },
                    },
                    splitLine: {//分割线配置
                        show:false,
                        lineStyle: {
                            color: "#D2D2D2",
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {//y轴文字的配置
                        textStyle: {
                            color: "#7C8DA3",
                            margin: 15
                        },
                    },
                    axisTick: {
                        show: true,
                    },
                    axisLine: {//y轴线的颜色以及宽度
                        show: true,
                        lineStyle: {
                            color: "#7C8DA3",
                            width: 1,
                            type: "solid"
                        },
                    },
                    splitLine: {//分割线配置
                        show:true,
                        lineStyle: {
                            color: "#D2D2D2",
                        }
                    }
                },
                series: [
                    {
                        tag: 'dayNum',
                        name:'电票派发数量',
                        type: 'line',
                        color: '#2EC7C9',
                        showSymbol: false,
                        smooth: true,
                        data: []
                    },{
                        tag: 'dayAmount',
                        name:'电票派发金额',
                        type: 'line',
                        color: '#8D98B3',
                        showSymbol: false,
                        smooth: true,
                        data: []
                    },{
                        tag: 'getNum',
                        name:'电票领取数量',
                        type: 'line',
                        color: '#FFD0AA',
                        showSymbol: false,
                        smooth: true,
                        data: []
                    },{
                        tag: 'getAmount',
                        name:'电票领取金额',
                        color: '#B6A2DE',
                        type: 'line',
                        showSymbol: false,
                        smooth: true,
                        data: []
                    },
                ]
            }
        }
    },
    mounted() {
        this.initData();
        this.getTicketLineList();
    },
    methods:{
        // 初始化数据
        initData(){
            this.$http.get('/api/eticket/countList', {params:this.params}).then(result => {
                if(result.code == 200){
                    this.listData = result.data;
                }else{
                    this.$message.error(result.msg);
                }
            });
        },
        // 日期
        changeDate(e){
            this.dataTime = e;
            const [dateBegin, dateEnd] = e;
            this.params.dateBegin = dateBegin;
            this.params.dateEnd = dateEnd;
        },
        // 查询商户
        queryMerchant(query, callback){
            this.$http.get('/api/altmch/droplist', {mchName:query}).then(result => {
                if(result.code == 200){
                    callback(result.data);
                }else{
                    this.$message.error(result.msg);
                }
            });
        },
        // 获取电票折线图
        getTicketLineList(){
            this.$http.get('/api/eticket/lineList', {params:this.params}).then(result => {
                if(result.code == 200){
                    this.chartData.titles = result.data.map(item => { return item.monthday; });
                    this.chartData.values.getNum = {name:'领取电票数量', value:result.data.map(item => { return Number(item.getNum); })};
                    this.chartData.values.dayNum = {name:'派发电票数量', value:result.data.map(item => { return Number(item.dayNum); })};
                    this.chartData.values.dayAmount = {name:'派发电票金额', value:result.data.map(item => { return Number(item.dayAmount); })};
                    this.chartData.values.getAmount = {name:'领取电票金额', value:result.data.map(item => { return Number(item.getAmount); })};
                }else{
                    this.$message.error(result.msg);
                }
            });
        },
        // 显示图表
        showTicketCharts(data){
            this.ticketOption.xAxis.data = data.titles;
            this.ticketOption.series.forEach((item, index) => {
                for(let i in data.values){
                    if(item.tag == i){
                        item.data = data.values[i].value;
                    }
                }
            });
            let ticketOption = this.$echarts.init(document.getElementById('ticker_charts')).setOption(this.ticketOption);
        },
        // 选择商户
        selectComplate(e){},
        // 查询数据
        searchData(e){
            this.params.currPage = 1;
            this.initData();
            this.getTicketLineList();
        },
        // 重置查询
        resetSearch(e){
            ['searchKey','dateBegin','dateEnd'].forEach((item, index) => {
                this.params[item] = null;
            });
            this.dateTime = [];
            this.searchData();
        },
        // 分页点击
        changePage(e){
            this.params.currPage = e;
            this.initData();
        },
    },
    watch:{
        chartData:{
            deep:true,
            handler(data){
                this.showTicketCharts(data);
            }
        },
    },
    components:{
        Page,
    }
}
</script>
<style lang="less" scoped>
::v-deep(.page-main){
    .datalist{
        .table-charts{
            padding:20px 0px;
        }
    }
}
</style>
